<template>
  <div class="user-info">
    <h1>1.修改密码</h1>
    <el-form size="normal" :rules="passRule" ref="form" :model="form" @submit.native.prevent>
      <el-form-item label="旧密码" prop="oldPass">
        <el-input v-model="form.oldPass" :type="type" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
        <el-input v-model="form.newPass" :type="type" placeholder="请输入新密码">
          <el-button slot="append" icon="el-icon-view" @click="handleType"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updatePassword" v-loading="submiting">
          确定修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { FormRuleConf } from '@/config';
  import { encryptedData } from '@/utils/index';

  export default {
    data() {
      return {
        ...FormRuleConf.Password,
        form: {
          oldPass: '',
          newPass: '',
        },
        activeNames: ['password'],
        type: 'password',
        submiting: false,
      };
    },
    mounted() {},
    methods: {
      updatePassword() {
        this.$refs.form.validate((valid) => {
          if (valid && !this.submiting) {
            this.submiting = true;
            this.$service
              .SysUserUpdatePass(
                {
                  oldPass: encryptedData(this.form.oldPass),
                  newPass: encryptedData(this.form.newPass),
                },
                {
                  ...JSON_HEADER,
                },
              )
              .then((res) => {
                this.submiting = false;
                this.$message.success('密码修改成功，请牢记');
              })
              .catch((err) => {
                this.submiting = false;
              });
          }
        });
      },
      handleType() {
        if (this.type === 'password') {
          this.type = '';
        } else {
          this.type = 'password';
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .user-info {
    padding: 20px;
    background: #fff;
    .el-form {
      width: 500px;
    }
  }
</style>
